<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>房联行增值服务部后台管理中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">轮播图管理</a>
        <a>
          <cite>轮播图列表</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh-1" style="line-height:30px"></i>
      </a>
    </div>
    <div class="x-body">
<xblock class="demoTable">
				<button class="layui-btn layui-btn-danger layui-btn-sm" onclick="x_admin_show('修改轮播图','./banner-edit.html')"><i class="layui-icon layui-icon-edit"></i>编辑</button>
				<button class="layui-btn layui-btn-sm" onclick="x_admin_show('增加轮播图','./banner-add.html')"><i class="layui-icon"></i>添加</button>
				<span class="x-right" style="line-height:40px">共有数据：88 条</span>
</xblock>
 <form class="layui-form">
<table class="layui-table" lay-data="{height: 'full-200', url:'banner.json', page:true, id:'idTest'}" lay-filter="demo">
  <thead>
    <tr>
      <!-- <th lay-data="{type:'checkbox', fixed: 'left'}"></th>-->
      <th lay-data="{field:'id', width:80, sort: true, fixed: true, edit: 'text', fixed: 'left'}">广告ID</th>
      <th lay-data="{field:'title', width:180}">标题</th>
      <th lay-data="{field:'img', width:150,templet:'#imgurl'}">缩略图</th>
      <th lay-data="{field:'type', width:160}">类型1</th>
      <th lay-data="{field:'linktype', width:100}">跳转类型</th>
      <th lay-data="{field:'datetime', width:150}">创建时间</th>
      <th lay-data="{field:'status', width:100, sort: true, fixed: 'right', templet: '#status'}">状态</th>
      <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
  </thead>
</table>
</form>
</div>
<script type="text/html" id="imgurl">
<img src="{{d.img}}" width="60" height="40"/>
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit" onclick="x_admin_show('编辑','banner-edit.html')" href="javascript:;">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-normal status" lay-event="status">启用</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs " lay-event="del">删除</a>
</script>
<script>
layui.use('table', function(){
  var table = layui.table;
  //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    //编辑
    if(obj.event === 'edit'){
     // layer.msg('ID：'+ data.id + ' 的查看操作');
    } 
    //删除
    else if(obj.event === 'del'){
      layer.confirm('确定要删除吗', function(index){
        obj.del();
        layer.close(index);
      });
    } 
    //状态
    else if(obj.event === 'status'){
    // layer.alert('编辑行：<br>'+ JSON.stringify(data))
		    if($(this).text() == '停用')
		    {
		    	$(this).text('启用');
					$(this).addClass('layui-btn-normal').removeClass('layui-btn-warm');
					$(this).parent().parent().prev("td").find("div").html('启用中');
		    }
		    else if($(this).text() == '启用')
		    {
		    	$(this).text('停用');
					$(this).addClass('layui-btn-warm').removeClass('layui-btn-normal');
					$(this).parent().parent().prev("td").find("div").html('已停用');
		    }
    }
  });
});
</script>
  </body>

</html>